<template>
  <view class="box" @click="external">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image
        @click.stop="fanhui"
        class="image1"
        src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png"
      />
      <!-- #ifndef MP-WEIXIN -->
      在售车系
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN -->
      <text
        @click="fanhui"
        style="position: absolute; left: 50%; transform: translateX(-50%)"
        >在售车系</text
      >
      <!-- #endif -->
      <!-- <image @click.stop="sousuo" class="image2" src="https://pic.bangbangtongcheng.com/static/sousuo.png"
        mode="widthFix" /> -->
    </view>
    <view
      class="tit_list"
      :style="'height: calc(100vh - 88rpx - ' + statusBarHeight1 + 'px);'"
    >
      <view class="tit">
        <view class="view"></view>
        <view class="sai" @click.stop="showModal" data-target="DrawerModalR">
          筛选
          <span>▼</span>
        </view>
      </view>
      <scroll-view
        class="scroll-view"
        :scroll-y="modalName == '' || modalName == null"
        @scrolltolower="down"
        :scroll-top="scrollTop1"
        @scroll="scroll"
        refresher-background="#f5f5f5"
      >
        <view
          class="liss"
          v-for="(item, index) in Recommend"
          :key="index"
          @click="details(item.id)"
        >
          <image mode="aspectFit" :src="item.vehicleCoverPicture" />
          <view class="li_2" style="max-width: 336rpx">
            <view class="vehicleRecom">
              <span class="tagLabel">在售车系</span>
              <text>{{ item.title }}</text>
              <!-- <span v-if="item.vehicleType==2">{{item.vehicleBrandModel.split('|')[0] + ' '}} {{item.vehicleBrandModel.split('|')[1]?item.vehicleBrandModel.split('|')[1] + "/":"/"}} {{item.mileage<10000?item.mileage+"公里/":(item.mileage/10000).toFixed(1)+"万公里/"}} {{item.licensingTimeYear}}</span>
							<span v-else>{{item.vehicleBrandModel.split('|')[0] + ' '}} {{item.vehicleBrandModel.split('|')[1]?item.vehicleBrandModel.split('|')[1] + "/":"/"}} {{item.model?item.model+'/':""}} {{item.bodyStructureDoors+"门"+item.bodyStructureSeat+"座"+item.bodyStructureVehicle+"车"}}</span> -->
            </view>
            <view class="price">
              {{ item.intervalPrice
              }}{{
                item.intervalPrice && item.intervalPrice.indexOf("万") >= 0 ? "" : "万"
              }}
            </view>
          </view>
        </view>
        <view v-if="Recommend.length == 0 && !isF" class="none">
          <image
            src="https://pic.bangbangtongcheng.com/static/none.png"
            mode="widthFix"
          />
          <view>没有更多数据了</view>
        </view>
        <view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
      </scroll-view>
    </view>
    <view
      class="cu-modal drawer-modal justify-end"
      :class="modalName == 'DrawerModalR' ? 'show' : ''"
    >
      <scroll-view scroll-y="true" class="pop-scroll">
        <view
          class="tittit"
          v-if="!selectBrand && !selectSeries"
          :style="[{ top: 'calc(' + CustomBar1 + 'px' + ' + 36px )' }]"
        >
          <view @click="hideModal()">×</view>筛选
        </view>
        <view
          class="cu-dialog basis-lg"
          v-if="!selectBrand && !selectSeries"
          @tap.stop
          :style="[
            {
              top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',
              height: 'calc(100vh - ' + CustomBar1 + 'px - 36px)',
            },
          ]"
        >
          <view class="cu-list menu text-left">
            <view style="height: 80rpx"></view>
            <view class="choiceCarSeries" v-if="xzrangeData.length != 0">
              <view class="item" v-for="(i, j) in xzrangeData" :key="i.id">
                <span class="choiceCarSeriesName"
                  >{{ i.brandName }} {{ i.seriesName || "" }}</span
                >
                <span class="close" @click="qxchooseCars(i.id)">×</span>
              </view>
            </view>
            <view class="leibie">
              车辆类型
              <span style="color: #999999">（请选择类型）</span>
              <view class="list">
                <view
                  @click.stop="type4Click(index)"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in type4"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
            <view class="quyu" v-if="cheType != '老年代步车' && cheType != '农用车'">
              品牌车系
              <view class="list">
                <view class="chooseCars" @click.stop="selectBrandChage">
                  选择品牌车系
                </view>
              </view>
            </view>
            <view class="mianji" v-if="cheType != '老年代步车' && cheType != '农用车'">
              变速箱
              <view class="list">
                <view class="radio" @click.stop="tabClickbs(1)">
                  <view class="radio_item" :class="bsChage == 1 ? 'radioxz' : ''"></view>
                  <span>自动</span>
                </view>
                <view class="radio" @click.stop="tabClickbs(2)">
                  <view class="radio_item" :class="bsChage == 2 ? 'radioxz' : ''"></view>
                  <span>手动</span>
                </view>
              </view>
            </view>
            <view class="mianji">
              价格
              <view class="list">
                <view
                  class="radio"
                  @click.stop="tabClickjg(i.valueName)"
                  v-for="(i, j) in type8"
                  :key="i.valueNum"
                >
                  <view
                    class="radio_item"
                    :class="type8index == i.valueName ? 'radioxz' : ''"
                  ></view>
                  <span>{{ i.valueName }}</span>
                </view>
              </view>
              <view class="customPrice">
                <span
                  style="
                    font-size: 28rpx;
                    font-weight: 500;
                    color: #333333;
                    margin-right: 8rpx;
                  "
                  >自定义</span
                >
                <view class="minimumPrice">
                  <input
                    class="input"
                    v-model="referCarSourceData.minimumPrice"
                    type="number"
                  />
                </view>
                <span style="margin: 0 10rpx">-</span>
                <view class="ceilePrice">
                  <input
                    class="input"
                    v-model="referCarSourceData.highestPrice"
                    type="number"
                  /> </view
                ><span style="margin-left: 8rpx">万</span>
                <view class="confirm" @click="firmPrice()"> 确定 </view>
              </view>
            </view>
            <view
              class="mianji"
              v-if="
                type5index != '新能源' && cheType != '老年代步车' && cheType != '农用车'
              "
            >
              排量
              <view class="list">
                <view
                  class="radio"
                  @click.stop="tabClickpl(i.valueName)"
                  v-for="(i, j) in type10"
                  :key="i.valueNum"
                >
                  <view
                    class="radio_item"
                    :class="type10index == i.valueName ? 'radioxz' : ''"
                  ></view>
                  <span>{{ i.valueName }}</span>
                </view>
              </view>
            </view>
            <view
              class="leibie"
              v-if="
                type5index != '新能源' && cheType != '老年代步车' && cheType != '农用车'
              "
            >
              排放标准
              <view class="list">
                <view
                  @click.stop="type6Click(index)"
                  :class="item.active ? 'li xuan' : 'li'"
                  v-for="(item, index) in type6"
                  :key="index"
                  >{{ item.valueName }}</view
                >
              </view>
            </view>
            <view class="mianji" v-if="cheType != '老年代步车' && cheType != '农用车'">
              燃油类型
              <view class="list">
                <view
                  class="radio"
                  @click.stop="tabClickry(i.valueName)"
                  v-for="(i, j) in type5"
                  :key="i.valueNum"
                >
                  <view
                    class="radio_item"
                    :class="type5index == i.valueName ? 'radioxz' : ''"
                  ></view>
                  <span>{{ i.valueName }}</span>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view
          class="tittit"
          v-if="selectBrand"
          :style="[{ top: 'calc(' + CustomBar1 + 'px' + ' + 36px )' }]"
        >
          <view @click.stop="selectBrandfh()">
            <image
              style="width: 40rpx; height: 40rpx"
              src="https://pic.bangbangtongcheng.com/8937350f727e4eeda6e97ab0d7398e65"
            ></image> </view
          >选择品牌
        </view>
        <view
          class="cu-dialog basis-lg"
          v-if="selectBrand"
          @tap.stop
          style="background-color: #fff"
          :style="[
            {
              top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',
              height: 'calc(100vh - ' + CustomBar1 + 'px - 36px)',
            },
          ]"
        >
          <view class="cu-list menu text-left">
            <view style="height: 80rpx"></view>
            <view class="buxian" @click.stop="selectSeriesChage()">不限品牌</view>
            <u-index-list :index-list="indexList" :customNavHeight="viewHight">
              <view v-for="(item, index) in brandArr" :key="index">
                <!-- #ifdef APP-NVUE -->
                <u-index-anchor :text="indexList[index]"></u-index-anchor>
                <!-- #endif -->
                <u-index-item>
                  <!-- #ifndef APP-NVUE -->
                  <u-index-anchor :text="indexList[index]"></u-index-anchor>
                  <!-- #endif -->
                  <view
                    class="list-cell"
                    @click.stop="selectSeriesChage(cell)"
                    v-for="(cell, indexs) in item"
                    :key="indexs"
                  >
                    <view class="list-cell-left">
                      <image class="list-cell-left-image" :src="cell.brandImage"></image>
                      <span class="list-cell-left-span">{{ cell.brandName }}</span>
                    </view>
                    <!-- <image class="list-cell-right"
											src="https://pic.bangbangtongcheng.com/static/bbcz/youjt.png" mode="">
										</image> -->
                  </view>
                </u-index-item>
              </view>
            </u-index-list>
          </view>
        </view>
        <view
          class="tittit"
          v-if="selectSeries"
          :style="[{ top: 'calc(' + CustomBar1 + 'px' + ' + 36px )' }]"
        >
          <view @click.stop="selectSeriesfh()">
            <image
              style="width: 40rpx; height: 40rpx"
              src="https://pic.bangbangtongcheng.com/8937350f727e4eeda6e97ab0d7398e65"
            ></image> </view
          >选择车系
        </view>
        <view
          class="cu-dialog basis-lg"
          v-if="selectSeries"
          @tap.stop
          :style="[
            {
              top: 'calc(' + CustomBar1 + 'px' + ' + 36px )',
              height: 'calc(100vh - ' + CustomBar1 + 'px - 36px)',
            },
          ]"
        >
          <view class="cu-list menu text-left">
            <view style="height: 80rpx"></view>
            <view class="vehicleBrand">
              <image
                class="vehicleBrand_image"
                :src="xzchelxx.brandImage"
                mode=""
              ></image>
              <span class="vehicleBrand_span">{{ xzchelxx.brandName }}</span>
            </view>
            <view class="vehicleBrand-xzcx"> 选择车系 </view>
            <view
              class="buxian"
              style="border-bottom: 1px solid #f0f0f0; padding-left: 40rpx"
              @click="chooseCars()"
              >不限车系</view
            >
            <view
              class="vehicleBrand_item"
              v-for="(i, j) in rangeData"
              :key="i.id"
              @click="chooseCars(i)"
            >
              <image class="vehicleBrand_item_image" :src="i.seriesImage" mode=""></image>
              <span class="vehicleBrand_item_span">{{ i.seriesName }}</span>
            </view>
          </view>
        </view>
        <view class="di">
          <view class="div l" @click.stop="cz">重置</view>
          <view class="div r" @click.stop="sx">确定</view>
        </view>
      </scroll-view>
    </view>
    <view v-if="scrollTop > 0" class="hui" @click.stop="totop">
      <image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
    </view>
    <!-- <view-tabbar :selected="0"></view-tabbar> -->
    <uniBall></uniBall>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
//#ifdef H5
import wxshare from "../../utils/index.js";
//#endif
import Tabbar from "@/components/tabbar.vue";
export default {
  data() {
    return {
      xuan: 1,
      modalName: "",
      Recommend: [],
      imgUrl: this.$imgSrc,
      scrollTop: "0",
      scrollTop1: "0",
      trigger: false,
      downStatus: true,
      upStatus: true,
      CustomBar1: "",
      num: 0,
      userInfo: uni.getStorageSync("Pduser"),
      type4: [],
      type5: [],
      type5index: -1,
      type6: [],
      type8: [],
      type8index: -1,
      type10: [],
      type10index: -1,
      selectBrand: false,
      selectSeries: false,
      bsChage: "",
      indexList: [],
      brandArr: [],
      // 选中的车辆信息
      xzchelxx: {},
      // 车系数据
      rangeData: [],
      // 选择的车系信息
      xzrangeData: [],
      // 查询车源
      referCarSourceData: {
        pageSize: 10,
        pageNo: 1,
		userIds:'',
        vehicleClassification: "",
        vehicleBrandModel: "",
        transmissionCase: "",
        price: "",
        minimumPrice: "",
        highestPrice: "",
        displacement: "",
        emissionStandard: "",
        fuelType: "",
      },
      cheType: "",
      viewHight: "",
      isF: true,
    };
  },
  components: {
    "view-tabbar": Tabbar,
  },
  computed: {
    ...mapGetters(["statusBarHeight1", "userinfo"]),
  },
  filters: {
    nums(val) {
      return val.toFixed(2);
    },
  },
  onLoad(options) {
    this.getType();
    this.getRecommend();
    this.CustomBar1 = this.CustomBar;
    // 获取窗口信息
    let getWindowInfo = uni.getWindowInfo();
    let isAndroid = false;
    const res = uni.getSystemInfoSync();
    if (res.platform == "android") {
      this.viewHight = getWindowInfo.screenHeight - (this.CustomBar1 + 36 + 80 + 50);
    } else {
      this.viewHight = getWindowInfo.screenHeight - (this.CustomBar1 + 36 + 80 + 100);
    }
    /* #ifdef H5 */
    this.jinzhi();
    /* #endif */
  },
  onPageScroll: function (Object) {
    console.log(Object.scrollTop, "---"); //实时获取到滚动的值
    this.scrollTop = Object.scrollTop;
  },
  async onPullDownRefresh() {
    this.Recommend = [];
    this.pageNo = 1;
    this.downStatus = true;
    if (this.upStatus) {
      this.trigger = true;
      await this.getRecommend();
    }
  },
  methods: {
    firmPrice() {
      console.log(this.referCarSourceData);
      if (!this.referCarSourceData.minimumPrice) {
        uni.showToast({
          title: "最低价不能为空",
          icon: "none",
          mask: true,
        });
        return;
      }
      if (!this.referCarSourceData.highestPrice) {
        uni.showToast({
          title: "最高价不能为空",
          icon: "none",
          mask: true,
        });
        return;
      }
      if (
        Number(this.referCarSourceData.minimumPrice) >
        Number(this.referCarSourceData.highestPrice)
      ) {
        uni.showToast({
          title: "最低价不能高于最高价",
          icon: "none",
          mask: true,
        });
        return;
      }
      this.type8index = -1;
      this.referCarSourceData.price = "";
    },
    selectBrandChage() {
      this.selectBrand = true;
      this.brandArr = [];
      this.brandInformation();
    },
    selectBrandfh() {
      this.selectBrand = false;
    },
    selectSeriesChage(item) {
      if (!item) {
        this.selectBrandfh();
        return;
      }
      this.selectSeries = true;
      this.selectBrand = false;
      this.xzchelxx = item;
      this.modelInformation(item.id);
    },
    selectSeriesfh() {
      this.selectSeries = false;
      this.selectBrand = true;
    },
    tabClickbs(e) {
      this.bsChage = e;
      if (e == 1) {
        this.referCarSourceData.transmissionCase = 1;
      } else {
        this.referCarSourceData.transmissionCase = 2;
      }
    },
    tabClickjg(e) {
      this.type8index = e;
      this.referCarSourceData.price = e;
      this.referCarSourceData.minimumPrice = "";
      this.referCarSourceData.highestPrice = "";
    },
    tabClickpl(e) {
      this.type10index = e;
    },
    tabClickry(e) {
      this.type5index = e;
      if (e == "新能源") {
        this.referCarSourceData.emissionStandard = "";
        this.referCarSourceData.fuelType = "";
        this.type10index = -1;
        this.type6.forEach((el) => {
          el.active = false;
        });
      }
    },
    // 获取车辆品牌信息
    brandInformation() {
      let that = this;
      this.$myRequest
        .get("/api/mobile/vehicleOwner/queryVehicleBrandList")
        .then((res) => {
          let arr = res.vehicleBrandMapList;
          let indexList = [];
          for (let i in arr) {
            this.brandArr.push(arr[i]);
            indexList.push(arr[i][0].initial);
          }
          this.indexList = indexList;
        });
    },
    // 获取车系信息
    modelInformation(id) {
      let that = this;
      this.$myRequest
        .get("/api/mobile/vehicleOwner/queryVehicleSeriesListByBrandId", {
          brandId: id,
        })
        .then((res) => {
          this.rangeData = res.vehicleSeriesList;
        });
    },
    chooseCars(item) {
      if (!item) {
        this.xzrangeData.push(this.xzchelxx);
        this.selectSeries = false;
        this.selectBrand = false;
        return;
      }
      item.brandName = this.xzchelxx.brandName;
      this.xzrangeData.push(item);
      this.selectSeries = false;
      this.selectBrand = false;
    },
    qxchooseCars(id) {
      this.xzrangeData.forEach((v, j) => {
        if (v.id == id) {
          this.xzrangeData.splice(j, 1);
        }
      });
    },
    xuanzhong(num) {
      this.userType = num;
      this.Recommend = [];
      this.pageNo = 1;
      this.downStatus = true;
      this.getRecommend();
    },
    scroll(e) {
      this.oldScrollTop = e.detail.scrollTop;
      this.scrollTop = e.detail.scrollTop;
    },
    cz() {
      this.type4.forEach((el) => {
        el.active = false;
      });
      this.type5index = -1;
      this.type6.forEach((el) => {
        el.active = false;
      });
      this.type10index = -1;
      this.type8index = -1;
      this.xzrangeData = [];
      this.bsChage = "";
      (this.referCarSourceData = {
        pageSize: 10,
        pageNo: 1,
		userIds:'',
        vehicleClassification: "",
        vehicleBrandModel: "",
        transmissionCase: "",
        price: "",
        minimumPrice: "",
        highestPrice: "",
        displacement: "",
        emissionStandard: "",
        fuelType: "",
      }),
        (this.Recommend = []);
      this.downStatus = true;
      // this.modalName = null;
      this.getRecommend();
    },
    jinzhi() {
      let _this = this;
      let param = window.location.href.split("#")[0];
      uni.request({
        method: "post",
        data: {
          url: param,
        },
        header: {
          "content-type": "application/x-www-form-urlencoded",
        },
        url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
        success(re) {
          _this.jinzhifx(re.data);
        },
      });
    },
    jinzhifx(data) {
      wxshare.config({
        debug: false, //是否打开调试
        appId: data.appId, // 公众号的唯一标识
        timestamp: data.timestamp, // 生成签名的时间戳
        nonceStr: data.nonce, // ，生成签名的随机串
        signature: data.signature, // 签名
        jsApiList: ["hideMenuItems"],
      });
      // 禁止分享
      wxshare.hideMenuItems({
        // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
        menuList: [
          "menuItem:share:appMessage",
          "menuItem:share:timeline",
          "menuItem:share:timeline",
          "menuItem:share:qq",
          "menuItem:favorite",
          "menuItem:share:QZone",
          "menuItem:openWithSafari",
        ],
      });
    },
    totop() {
      this.scrollTop1 = this.oldScrollTop;
      this.$nextTick(() => {
        this.scrollTop1 = 0;
      });
    },
    sx() {
      let that = this;
      let arr = [];
      this.referCarSourceData.vehicleClassification = "";
      this.referCarSourceData.fuelType = "";
      this.referCarSourceData.emissionStandard = "";
      this.xzrangeData.forEach((v) => {
        if (v.seriesName) {
          let as = v.brandName + "|" + v.seriesName;
          arr.push(as);
        } else {
          let as = v.brandName;
          arr.push(as);
        }
      });
      this.referCarSourceData.vehicleBrandModel = arr.join(",");
      this.type4.forEach((el) => {
        if (el.active == true) {
          this.referCarSourceData.vehicleClassification = el.valueName;
        }
      });
      this.referCarSourceData.fuelType = this.type5index == -1 ? "" : this.type5index;
      this.type6.forEach((el) => {
        if (el.active == true) {
          this.referCarSourceData.emissionStandard = el.valueName;
        }
      });
      this.referCarSourceData.displacement =
        this.type10index == -1 ? "" : this.type10index;
      this.Recommend = [];
      this.referCarSourceData.pageNo = 1;
      this.downStatus = true;
      this.modalName = null;
      this.getRecommend();
    },
    type4Click(index) {
      let that = this;
      this.type4.forEach((el, index1) => {
        if (index == index1) {
          that.$set(that.type4[index1], "active", !el.active);
          this.cheType = that.type4[index1].valueName;
          if (
            that.type4[index1].valueName == "老年代步车" ||
            that.type4[index1].valueName == "农用车"
          ) {
            this.type5index = -1;
            this.type6.forEach((el) => {
              el.active = false;
            });
            this.type10index = -1;
            this.type8index = -1;
            this.xzrangeData = [];
            this.bsChage = "";
            this.referCarSourceData.vehicleBrandModel = "";
            this.referCarSourceData.transmissionCase = "";
            this.referCarSourceData.displacement = "";
            this.referCarSourceData.emissionStandard = "";
            this.referCarSourceData.fuelType = "";
          }
        } else {
          that.type4[index1].active = false;
        }
      });
    },
    type6Click(index) {
      let that = this;
      this.type6.forEach((el, index1) => {
        if (index == index1) {
          that.$set(that.type6[index1], "active", !el.active);
        } else {
          that.type6[index1].active = false;
        }
      });
    },
    getType() {
      let that = this;
      this.$myRequest
        .get("/api/mobile/vehicleOwner/queryDataDictionaryList", {
          type: "4,5,6,8,10",
        })
        .then((res) => {
          res.dataDictionaryList.forEach((el) => {
            el.active = false;
            if (el.type == 4) {
              that.type4.push(el);
            } else if (el.type == 5) {
              that.type5.push(el);
            } else if (el.type == 6) {
              that.type6.push(el);
            } else if (el.type == 8) {
              that.type8.push(el);
            } else if (el.type == 10) {
              that.type10.push(el);
            }
          });
        });
    },
    sousuo() {
      // if (!this.userinfo.phone) {
      // 	uni.showToast({
      // 		title: "请登录",
      // 		icon: "none",
      // 		mask: true
      // 	});
      // 	return;
      // }
      uni.navigateTo({
        url: "/pages_houses/housing/oldHouseSearch?searchlogType=1&type=2",
      });
    },
    details(id) {
      uni.navigateTo({
        url: "/pages_owner/index/carSeriesDetails?id=" + id,
      });
    },
    showModal(e) {
      this.modalName = e.currentTarget.dataset.target;
      uni.stopPullDownRefresh();
    },
    guan() {
      this.zbc = false;
    },
    down() {
      if (this.downStatus) {
        this.referCarSourceData.pageNo++;
        this.getRecommend();
      }
    },
    async up() {
      this.Recommend = [];
      this.referCarSourceData.pageNo = 1;
      this.downStatus = true;
      if (this.upStatus) {
        this.trigger = true;
        await this.getRecommend();
      }
    },
    getRecommend() {
      this.upStatus = false;
	  this.referCarSourceData.userIds=this.userInfo.id
      this.$myRequest
        .get("/api/mobile/vehicleOwner/getSeriesVehicle", this.referCarSourceData)
        .then((res) => {
          if (!res.vehicleInformationList.pageList.length) {
            this.downStatus = false;
          }
          this.upStatus = true;
          this.trigger = false;
          this.Recommend = this.Recommend.concat(res.vehicleInformationList.pageList);
          this.isF = false;
          uni.stopPullDownRefresh();
        });
    },
    hideModal(e) {
      this.modalName = null;
    },
    external() {
      this.modalName = null;
    },
    fanhui() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.tittit {
  position: fixed;
  top: 0;
  right: 0;
  background-color: #f8f8f8;
  z-index: 9999;
  max-width: 100%;
  width: 600rpx;
  transition-duration: 0.3s;
  transform: translateX(100%);

  text-align: center;
  line-height: 80rpx;
  font-size: 30rpx;
  border-bottom: 2rpx solid #cccccc;

  view {
    position: absolute;
    top: 0rpx;
    left: 20rpx;
    color: #999999;
    font-size: 54rpx;
    font-weight: 100;
  }
}

.show .tittit {
  transform: translateX(0%);
}

.cu-list {
  padding-bottom: calc(98rpx + env(safe-area-inset-bottom) / 2);
  background-color: #fff;
  .buxian {
    height: 80rpx;
    display: flex;
    align-items: center;
    padding-left: 20rpx;
  }
  .tit {
    position: relative;
    width: 100%;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    font-size: 30rpx;
    border-bottom: 2rpx solid #cccccc;

    view {
      position: absolute;
      top: 0rpx;
      left: 20rpx;
      color: #999999;
      font-size: 54rpx;
      font-weight: 100;
    }
  }

  .titlepp {
    height: 100rpx;
    line-height: 100rpx;
    margin-left: 38rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #333333;
  }

  .u-index-anchor {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    background-color: #f2f2f2 !important;
  }

  .list-cell {
    display: flex;
    box-sizing: border-box;
    width: 90%;
    padding: 10px 24rpx;
    overflow: hidden;
    color: #323233;
    font-size: 14px;
    line-height: 24px;
    background-color: #fff;
    justify-content: space-between;
    align-items: center;

    .list-cell-left {
      display: flex;
      align-items: center;

      .list-cell-left-image {
        width: 60rpx;
        height: 60rpx;
        margin-right: 17rpx;
      }
    }

    .list-cell-right {
      width: 40rpx;
      height: 40rpx;
    }
  }

  .vehicleBrand {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100rpx;

    .vehicleBrand_image {
      width: 100rpx;
      height: 80rpx;
    }

    .vehicleBrand_span {
      font-size: 40rpx;
      font-weight: 400;
      color: #333333;
      margin-left: 5rpx;
    }
  }

  .choiceCarSeries {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    background-color: #f2f2f2;
    margin-top: 30rpx;
    padding: 20rpx 0;
    padding-left: 40rpx;

    .item {
      // width: 120rpx;
      padding: 10rpx 20rpx;
      // height: 50rpx;
      margin-bottom: 20rpx;
      border: 1px solid #333;
      font-size: 24rpx;
      line-height: 50rpx;
      margin-right: 20rpx;
      display: flex;
      align-items: center;

      .choiceCarSeriesName {
        max-width: 200rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin-right: 10rpx;
      }

      .close {
        font-size: 42rpx;
      }
    }
  }

  .vehicleBrand-xzcx {
    width: 100%;
    height: 50rpx;
    background-color: #f2f2f2;
    line-height: 50rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
    padding-left: 40rpx;
  }

  .vehicleBrand_item {
    display: flex;
    align-items: center;
    margin-bottom: 40rpx;

    .vehicleBrand_item_image {
      width: 142rpx;
      height: 75rpx;
      border-radius: 12rpx;
      margin-left: 50rpx;
    }

    .vehicleBrand_item_span {
      font-size: 30rpx;
      font-weight: 500;
      color: #6f6f6f;
      margin-left: 30rpx;
    }
  }

  .leibie {
    margin-top: 40rpx;
    font-size: 28rpx;
    margin-left: 40rpx;

    .list {
      width: 100%;
      margin-top: 24rpx;

      .li {
        display: inline-block;
        text-align: center;
        width: 154rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: #f2f2f2;
        border-radius: 30rpx;
        margin-right: 24rpx;
        margin-bottom: 24rpx;
      }

      .xuan {
        background: #64b6a8;
        color: #fff;
      }
    }
  }

  .quyu {
    margin-top: 40rpx;
    font-size: 28rpx;
    margin-left: 40rpx;

    .list {
      width: 100%;
      margin-top: 24rpx;

      .chooseCars {
        width: 503rpx;
        height: 60rpx;
        background-color: #64b6a8;
        border-radius: 12rpx;
        border: 1px solid #64b6a8;
        text-align: center;
        line-height: 60rpx;
        color: #fff;
      }

      .li {
        display: inline-block;
        text-align: center;
        width: 154rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: #f2f2f2;
        border-radius: 30rpx;
        margin-right: 24rpx;
        margin-bottom: 24rpx;
      }

      .xuan {
        background: #64b6a8;
        color: #fff;
      }
    }
  }

  .jiage {
    margin-top: 40rpx;
    font-size: 28rpx;
    margin-left: 40rpx;

    .list {
      width: 100%;
      margin-top: 24rpx;

      .li {
        display: inline-block;
        text-align: center;
        width: 214rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: #f2f2f2;
        border-radius: 30rpx;
        margin-right: 24rpx;
        margin-bottom: 24rpx;
      }

      .xuan {
        background: #64b6a8;
        color: #fff;
      }
    }
  }

  .mianji {
    margin-top: 40rpx;
    font-size: 28rpx;
    margin-left: 40rpx;
    margin-right: 50rpx;

    .list {
      width: 100%;
      margin-top: 24rpx;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .radio {
        width: 50%;
        display: flex;
        align-items: center;
        margin-bottom: 24rpx;

        .radio_item {
          width: 36rpx;
          height: 36rpx;
          border: 1px solid #333;
          border-radius: 36rpx;
          margin-right: 14rpx;

          span {
            font-size: 28rpx;
            font-weight: 500;
            color: #333333;
          }
        }

        .radioxz {
          border: 1px solid #64b6a8;
          position: relative;
        }

        .radioxz::before {
          content: "";
          width: 24rpx;
          height: 24rpx;
          border-radius: 24rpx;
          background-color: #64b6a8;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
    }

    .customPrice {
      display: flex;
      align-items: center;

      .input {
        width: 88rpx;
        height: 40rpx;
        border-radius: 4rpx;
        border: 1px solid #333333;
        padding: 6rpx;
        color: #64b6a8;
        font-size: 24rpx;
      }

      .minimumPrice {
        position: relative;
      }

      .ceilePrice {
        position: relative;
      }

      .minimumPrice::after {
        content: "最低价";
        width: 100rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: #999999;
        text-align: center;
        position: absolute;
        bottom: -34rpx;
        left: 50%;
        transform: translateX(-50%);
      }

      .ceilePrice::after {
        content: "最高价";
        width: 100rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: #999999;
        text-align: center;
        position: absolute;
        bottom: -34rpx;
        left: 50%;
        transform: translateX(-50%);
      }

      .confirm {
        width: 120rpx;
        height: 58rpx;
        background-color: #64b6a8;
        border-radius: 4rpx;
        text-align: center;
        line-height: 58rpx;
        color: #fff;
        margin-left: 30rpx;
      }
    }
  }

  .loucen {
    margin-top: 40rpx;
    font-size: 28rpx;
    margin-left: 40rpx;

    .list {
      width: 100%;
      margin-top: 24rpx;

      .li {
        display: inline-block;
        text-align: center;
        width: 154rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: #f2f2f2;
        border-radius: 30rpx;
        margin-right: 24rpx;
        margin-bottom: 24rpx;
      }

      .xuan {
        background: #64b6a8;
        color: #fff;
      }
    }
  }
}

.zbc {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99999;
}

.box {
  width: 100%;
  // padding-bottom: 20rpx;
  background-color: #fff;
}

.tou {
  position: relative;
  width: 100%;
  // height: 88rpx;
  text-align: center;
  line-height: 88rpx;
  font-size: 36rpx;
  color: #fff;
  background-color: #64b6a8;
  /* #ifdef MP-WEIXIN */
  text-align: left;
  display: flex;
  align-items: center;
  /* #endif */

  .image1 {
    position: absolute;
    width: 32rpx;
    height: 32rpx;
    // top: 116rpx;
    left: 30rpx;
  }

  .image2 {
    position: absolute;
    width: 56rpx;
    height: 56rpx;
    // top: 28rpx;
    /* #ifdef MP-WEIXIN */
    position: initial;
    margin-left: auto;
    margin-right: 200rpx;
    /* #endif */
    bottom: 16rpx !important;
    right: 30rpx;
    // #ifdef APP
    // top: 50%;
    // #endif
  }
}

.tit_list {
  padding: 32rpx 30rpx calc(env(safe-area-inset-bottom) / 2);

  .tit {
    position: relative;
    margin-bottom: 32rpx;

    .view {
      display: inline-block;
      width: 120rpx;
      height: 58rpx;
      border-radius: 8rpx;
      text-align: center;
      line-height: 58rpx;
      color: #333;
      margin-right: 24rpx;
      font-size: 32rpx;
    }

    .xuan {
      background-color: #64b6a8;
      color: #fff;
    }

    .sai {
      position: absolute;
      font-size: 32rpx;
      top: 4rpx;
      right: 30rpx;

      span {
        margin-left: 8rpx;
        font-size: 20rpx;
      }
    }
  }

  .liss {
    width: 96%;
    padding-bottom: 30rpx;
    margin-bottom: 30rpx;
    border-bottom: 2rpx solid #e0e0e0;
    display: flex;
    // justify-content: space-between;

    image {
      background-color: #f8f8f8;
      width: 300rpx;
      height: 200rpx;
      border-radius: 20rpx;
    }

    .li_2 {
      margin-left: 24rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .vehicleRecom {
        font-size: 36rpx;
        line-height: 44rpx;
        font-weight: 600;
        color: #333333;
        line-height: 44rpx;

        .tagLabel {
          vertical-align: top;
          background: #64b6a8;
          color: #fff;
          font-size: 24rpx;
          text-align: center;
          width: 106rpx;
          margin-right: 10rpx;
          padding: 4rpx 6rpx;
          border-radius: 4rpx;
        }
      }

      .price {
        font-size: 38rpx;
        font-weight: 600;
        color: #e00000;
      }
    }
  }

  .li:last-child {
    border-bottom: 0rpx solid #e0e0e0;
  }
}

.hui {
  position: fixed;
  right: 30rpx;
  bottom: 154rpx;
  display: flex;
  align-items: center;
  padding: 10rpx 20rpx;
  background-color: #fff;
  border-radius: 34rpx;
  font-size: 26rpx;
  box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);

  image {
    width: 46rpx;
    height: 46rpx;
    margin-right: 18rpx;
  }
}

.cu-dialog {
  max-width: 100%;
  width: 600rpx;
}

.basis-lg {
  flex-basis: 600rpx;
  overflow: auto;
}
.pop-scroll {
  position: relative;
}
.di {
  position: absolute;
  transform: translateY(0rpx);
  width: 100%;
  bottom: 0;
  left: 75rpx;

  .div {
    display: inline-block;
    width: 300rpx;
    height: 98rpx;
    text-align: center;
    line-height: 98rpx;
    font-size: 30rpx;
  }

  .l {
    background: #e0e0e0;
  }

  .r {
    background: #64b6a8;
    color: #fff;
  }
}

.scroll-view {
  height: calc(100% - 58rpx - 24rpx);
}

.down {
  height: 60rpx;
  line-height: 60rpx;
  // border-top: 2rpx solid #d0d0d0;
  text-align: center;
}

.none {
  text-align: center;

  image {
    width: 430rpx;
    margin-bottom: 16rpx;
  }

  view {
    height: 40rpx;
    line-height: 40rpx;
    color: #666;
  }
}
</style>
